<template>
    <div class="inventoryTransact">
        <div class="publicSearch">
            <div class="searchBar" :style="{ height: isMoreSearch ? 'auto' : '' }">
                <el-button-group>
                    <el-button
                            @click="getInventoryTransactData"
                            size="mini"
                            icon="el-icon-search"
                    >查询</el-button
                    >
                    <el-button @click="clearSearchData" size="mini" icon="el-icon-refresh"
                    >重置</el-button
                    >
                </el-button-group>
                <div>
                    <span>物料编码</span>
                    <el-input
                            v-model="searchData.itemCode"
                            size="mini"
                            placeholder="物料编码"
                            clearable
                    ></el-input>
                </div>
                <div>
                    <span>物料名称</span>
                    <el-input
                            v-model="searchData.itemName"
                            size="mini"
                            placeholder="物料名称"
                            clearable
                    ></el-input>
                </div>
                <!--<div>-->
                    <!--<span>事务类型</span>-->
                    <!--<el-select-->
                            <!--v-model="searchData.transactType"-->
                            <!--size="mini"-->
                            <!--filterable-->
                            <!--placeholder="请选择事务类型"-->
                            <!--clearable-->
                    <!--&gt;-->
                        <!--<el-option-->
                                <!--v-for="item in transactTypes"-->
                                <!--:key="item.value"-->
                                <!--:label="item.label"-->
                                <!--:value="item.value"-->
                        <!--&gt;-->
                        <!--</el-option>-->
                    <!--</el-select>-->
                <!--</div>-->
                <!--<div>-->
                    <!--<span>单据类型</span>-->
                    <!--<el-select-->
                            <!--v-model="searchData.billType"-->
                            <!--size="mini"-->
                            <!--filterable-->
                            <!--placeholder="请选择单据类型"-->
                            <!--clearable-->
                    <!--&gt;-->
                        <!--<el-option-->
                                <!--v-for="item in billTypes"-->
                                <!--:key="item.value"-->
                                <!--:label="item.label"-->
                                <!--:value="item.value"-->
                        <!--&gt;-->
                        <!--</el-option>-->
                    <!--</el-select>-->
                <!--</div>-->
              
                <div>
                    <span>单据号</span>
                    <el-input
                            v-model="searchData.detailNo"
                            size="mini"
                            placeholder="单据号"
                            clearable
                    ></el-input>
                </div>
                <div>
                    <span>状态</span>
                    <el-select
                            v-model="searchData.state"
                            size="mini"
                            filterable
                            placeholder="请选择状态"
                            clearable
                    >
                        <el-option :key="1" label="同意" :value="1"></el-option>
                        <el-option :key="-1" label="不同意" :value="-1"></el-option>
                    </el-select>
                </div>

            </div>
            <span
                    class="moreSearchBtn"
                    :class="isMoreSearch ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"
                    @click="isMoreSearch = !isMoreSearch"
            ></span>
        </div>

        <div class="tableBox">
            <el-table
                    highlight-current-row
                    :data="inventoryTransacts"
                    style="width: 100%"
            >
                <el-table-column fixed="left" type="index" width="50">
                </el-table-column>


                <!--<el-table-column sortable prop="billType" label="单据类型" width="100">-->
                    <!--<template slot-scope="scope">-->
                        <!--<span-->
                                <!--v-for="(item, index) in billTypes"-->
                                <!--:key="index"-->
                                <!--v-if="scope.row.billType === item.value"-->
                        <!--&gt;{{ item.label }}</span-->
                        <!--&gt;-->
                    <!--</template>-->
                <!--</el-table-column>-->

                <el-table-column
                        sortable
                        show-overflow-tooltip
                        prop="detailNo"
                        label="单据号"
                        width="120"
                >
                </el-table-column>


                <el-table-column
                        sortable
                        show-overflow-tooltip
                        prop="itemCode"
                        label="物料编码"
                        width="150"
                >
                    <!--<template slot-scope="scope">-->
            <!--<span-->
                    <!--class="textBtn"-->
                    <!--@click="-->
                <!--$EventBus.$emit('showPublicModal', scope.row.itemCode, 'item')-->
              <!--"-->
            <!--&gt;{{ scope.row.itemCode }}</span-->
            <!--&gt;-->
                    <!--</template>-->
                    
                    
                </el-table-column>
                <el-table-column
                        sortable
                        show-overflow-tooltip
                        prop="itemName"
                        label="物料名称"
                        width="150"
                >
                    <!--<template slot-scope="scope">-->
            <!--<span-->
                    <!--class="textBtn"-->
                    <!--@click="-->
                <!--$EventBus.$emit('showPublicModal', scope.row.itemCode, 'item')-->
              <!--"-->
            <!--&gt;{{ scope.row.itemName }}</span-->
            <!--&gt;-->
                    <!--</template>-->
                </el-table-column>
                
                <el-table-column
                        sortable
                        show-overflow-tooltip
                        prop="wareName"
                        label="仓库"
                        width="150"
                >
                    <!--<template slot-scope="scope">-->
            <!--<span-->
                    <!--class="textBtn"-->
                    <!--@click="-->
                <!--$EventBus.$emit('showPublicModal', scope.row.wareId, 'ware')-->
              <!--"-->
            <!--&gt;{{ scope.row.wareName }}</span-->
            <!--&gt;-->
                    <!--</template>-->
                </el-table-column>
                
                
                <el-table-column
                        sortable
                        show-overflow-tooltip
                        prop="supplierName"
                        label="供应商"
                        width="180"
                >
                    <!--<template slot-scope="scope">-->
            <!--<span-->
                    <!--class="textBtn"-->
                    <!--@click="-->
                <!--$EventBus.$emit(-->
                  <!--'showPublicModal',-->
                  <!--scope.row.fromOrganizationId,-->
                  <!--'organization'-->
                <!--)-->
              <!--"-->
            <!--&gt;{{ scope.row.fromOrganizationName }}</span-->
            <!--&gt;-->
                        <!--<br />-->
                        <!--<span-->
                                <!--class="textBtn"-->
                                <!--@click="-->
                <!--$EventBus.$emit(-->
                  <!--'showPublicModal',-->
                  <!--scope.row.toOrganizationId,-->
                  <!--'organization'-->
                <!--)-->
              <!--"-->
                        <!--&gt;{{ scope.row.toOrganizationName }}</span-->
                        <!--&gt;-->
                    <!--</template>-->
                </el-table-column>

              


                <!--<el-table-column-->
                        <!--sortable-->
                        <!--show-overflow-tooltip-->
                        <!--prop="fromBoxCode"-->
                        <!--label="追踪号"-->
                        <!--width="150"-->
                <!--&gt;-->
                    <!--&lt;!&ndash;<template slot-scope="scope">&ndash;&gt;-->
                        <!--&lt;!&ndash;<span> {{ scope.row.fromBoxCode }}</span>&ndash;&gt;-->
                        <!--&lt;!&ndash;<br />&ndash;&gt;-->
                        <!--&lt;!&ndash;<span> {{ scope.row.toBoxCode }}</span>&ndash;&gt;-->
                    <!--&lt;!&ndash;</template>&ndash;&gt;-->
                <!--</el-table-column>-->

                <el-table-column
                        sortable
                        show-overflow-tooltip
                        prop="performance"
                        label="履约号"
                        width="150"
                >
                    <!--<template slot-scope="scope">-->
                        <!--<span> {{ scope.row.performance }}</span>-->
                        <!--<br />-->
                        <!--<span> {{ scope.row.performance }}</span>-->
                    <!--</template>-->
                </el-table-column>


              


                <el-table-column
                        sortable
                        show-overflow-tooltip
                        prop="fromQuantity"
                        label="主单位数量"
                        width="150"
                >
                    <!--<template slot-scope="scope">-->
                        <!--<span> {{ scope.row.fromQuantity }}</span>-->
                        <!--<br />-->
                        <!--<span> {{ scope.row.toQuantity }}</span>-->
                    <!--</template>-->
                </el-table-column>
                
                
                <el-table-column
                        sortable
                        show-overflow-tooltip
                        prop="createUserName"
                        label="创建人"
                        width="90"
                >
                    <!--<template slot-scope="scope">-->
                        <!--<el-button-->
                                <!--@click="-->
                <!--$EventBus.$emit(-->
                  <!--'showPublicModal',-->
                  <!--scope.row.createUserId,-->
                  <!--'account'-->
                <!--)-->
              <!--"-->
                                <!--type="text"-->
                        <!--&gt;{{ scope.row.createUserName }}</el-button-->
                        <!--&gt;-->
                    <!--</template>-->
                </el-table-column>
                
                
                <el-table-column
                        sortable
                        show-overflow-tooltip
                        prop="createTime"
                        label="事务时间"
                        width="150"
                >
                    <!--<template slot-scope="scope">-->
                        <!--{{ scope.row.createTime.substr(5, 11) }}-->
                    <!--</template>-->
                </el-table-column>

           
                <el-table-column
                        sortable
                        show-overflow-tooltip
                        prop="state"
                        label="状态"
                        width="80"
                >
                    <template slot-scope="scope">
                        <span v-if="scope.row.state === 1">完成</span>
                        <span v-if="scope.row.state === -1">撤回</span>
                    </template>
                </el-table-column>

            


            </el-table>
            <el-pagination
                    class="pagination-bottom"
                    style="text-align: right"
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    :page-sizes="[15, 30, 50, 100]"
                    :current-page.sync="searchData.pageNum"
                    :page-size="searchData.pageSize"
                    layout="sizes, total, prev, pager, next, jumper"
                    :total="searchData.total"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import { mapState } from "vuex";

    export default {
        name: "RawMaterialInventory",
        data() {
            return {
                isMoreSearch: false,

                searchData: {
                    pageNum: 1,
                    pageSize: 15,
                    total: null,
                    keyWords: "",
                    wareId: PF.getLocal("wareId", "number"),
                    transactType: "",
                    itemCode: "",
                    itemName: "",
                    billType: "",
                    detailNo: "",
                    state: "",
                    fromPackDescribe: "",
                    fromQuantity: "",
                    toPackDescribe: "",
                    toQuantity: "",
                    createUserName: "",
                 
                    startCreateTime: "",
                    endCreateTime: "",
                },

                inventoryTransacts: [],

                dialogNewVisible: false,
                dialogUpdateVisible: false,

                formLabelWidth: "120px",
            };
        },
        computed: {
            ...mapState(["transactTypes", "billTypes"]),
        },
        methods: {
            handleSizeChange(val) {
                this.searchData.pageSize = val;
                this.getInventoryTransactData();
            },
            handleCurrentChange(val) {
                this.pageNum = val;
                this.getInventoryTransactData();
            },
            clearSearchData() {
                this.searchData.keyWords = "";
                this.searchData.itemCode = "";
                this.searchData.itemName = "";
                this.searchData.transactType = "";
                this.searchData.buyType = "";
                this.searchData.detailNo = "";
                this.searchData.state = "";
                this.searchData.fromPackDescribe = "";
                this.searchData.fromQuantity = "";
                this.searchData.toPackDescribe = "";
                this.searchData.toQuantity = "";
                this.searchData.createUserName = "";
               
                this.searchData.startCreateTime = "";
                this.searchData.endCreateTime = "";
            },
            getInventoryTransactData() {
                let searchData = PF.JSON(this.searchData);
//                if (searchData.createTimeArr.length > 0) {
//                    searchData.startCreateTime = searchData.createTimeArr[0];
//                    searchData.endCreateTime = searchData.createTimeArr[1];
//                }
                IOT.getServerData(
                    "/inventory/transacts/list",
                    "get",
                    searchData,
                    (ret) => {
                        if (ret.code === 200) {
                            this.inventoryTransacts = ret.rows;
                            this.searchData.total = ret.total;
                            this.searchData.pageNum = ret.pageNumber;
                        } else {
                            IOT.tips(ret.message || "服务器请求失败，稍后再试！", "error");
                        }
                    }
                );
            },
        },
        created() {
            this.getInventoryTransactData();
        },
        mounted() {},
    };
</script>

<style scoped lang="less">
    .inventoryTransact {
    }
</style>
